<!-- （张仕琪）登录页面 -->
<template>
  <div class="all">
  <div class="logo">
    <div class="log login_title">欢迎登录</div>
    <!-- <img src="../assets/img/logo.png"> -->
    <div class="img_div">
      <img src="../assets/img/xiaoji.gif" class="img">
    </div>
  </div>

  <van-form @submit="login" class="login_sty">
    <van-cell-group>
      <van-field required v-model="user.userTel" type="tel" label="手机号" :rules="[
        { required: true, message: '请填手机号！' },
        { validator: isMobile, message: '手机号格式不正确！' },
      ]" />
      <van-field required v-model="user.userPassword" type="password" label="密码"
        :rules="[{ required: true, message: '请填密码！' }]" />
      <van-field required v-model="user.verifyCode" maxlength="5" label="验证码"
        :rules="[{ required: true, message: '请输入验证码！' }]">
        <template #right-icon>
          <van-image width="100" height="40" style="margin-left: 10px" :src="kapchaSrc" @click="flushKaptch" />
        </template>
      </van-field>
      <van-checkbox v-model="checked" class="van-field">
        <a>阅读《用户协议与隐私政策》</a>
      </van-checkbox>
      <van-button type="primary" block round class="login_btn " native-type="submit" :disabled="btnLoginIsUse">
        登 &nbsp; 录</van-button>
      <div style="text-align: right; margin: 10px">
        <a href="#" @click="toRegistView">没有帐号,立即注册?</a>
      </div>
    </van-cell-group>
  </van-form>
  <div class="down"></div>
</div>

</template>

<script setup>
import http from "@/utils/request.js";
import { useRoute, useRouter } from "vue-router";
import { Toast, Notify } from "vant";
import { reactive, ref, onMounted, computed } from "vue";
import { isMobile, isIdCard } from "@/utils/validate.js";
const route = useRoute();   //获取到当前路由对象；
const router = useRouter(); //获取到router 对象，用于编程式跳转导航
const kapchaSrc = ref("");
const checked = ref(false);

const user = reactive({
  userTel: "", //这个要和实体类的名字一模一样
  verifyCode: "",
  userPassword: "",
  uuid: "",
});
//获取图片验证码
function flushKaptch() {
  http
    .get("/user/kaptcha?d=" + Date.now())
    .then(function (response) {
      console.log(response);
      kapchaSrc.value = "data:image/gif;base64," + response.data.data.img;
      user.uuid = response.data.data.uuid;
    })
    .catch(function (error) {
      console.log(error);
    });
}

function login() {
  console.log("login:表单校验成功");
  http
    .post("/user/login", user) //后端的地址
    .then(function (res) {
      console.log("用户登录结果，", res);
      if (res.data.resCode === "200") {
        console.log("请求用户登录结果，", res.data);
        //将 token 保存本地缓存中
        localStorage.setItem("token", res.data.data.token);
        Notify({ type: "success", message: "登录成功！" });
        setTimeout(() => {
          //1000毫秒之后跳转至首页;
          const redirect = route.query.redirect;
          console.log('重定向地址：' + redirect);
          if (redirect) {
            router.push(redirect);
          } else {
            router.push("/");
          }
        }, 1000);
      } else {
        Notify({ type: "danger", message: res.data.resDesc });
      }
    })
    .catch(function (res) {
      //注册发送异常
      Notify({ type: "danger", message: "系统异常！" });
    });
}

//跳转到注册页面
function toRegistView() {
  router.push("/regist");
}

//登录按钮的可用状态
const btnLoginIsUse = computed(() => !checked.value);

onMounted(() => {
  //生命周其钩子函资数,用于组件挂钱完成之后执行一些任务
  flushKaptch();
});
</script>

<style scoped>
.login_title {
  font-size: 25px;
  /* position: relative; */
  text-align: center;
  margin-top: 40px;
  position: absolute;
  margin-bottom: 20px;
  margin-left: 55px;
  font-weight: 800;
  letter-spacing: 0.5rem;
  color: rgb(21, 141, 240);

}

.logo {
  position: relative;
  height: 250px;
  background-image: url("../assets/img/logo.png");
  background-size: 100% 100%
}

.van-field {
  padding: 16px 15px;
}

.login_btn {
  font-size: 20px;
  margin-top: 20px;
  width: 70%;

  position: relative;
  margin: auto;
  overflow: hidden;
  border: 0px solid;
  border-image: linear-gradient(45deg, gold, deeppink) 1;
  clip-path: inset(0px round 5px);
  animation: div6Ani 3s infinite linear;
  filter: hue-rotate(360deg);

}

@keyframes div6Ani {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rorate(360deg);
  }
}

.img_div {
  height: 50px;
  width: 50px;
}

.img {
  top: 200px;
  position: fixed;
  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0% {
    left: 0px;
  }

  /* 25%  { left:80px; top:0px;} */
  /* 50%  {left:150px; top:0px;} */
  /* 75%  { left:200px; top:0px;} */
  100% {
    left: 360px;
  }
}

.all{
  position: absolute;
  background-color: #fef0da;
  height: auto;
 
}

.login_sty{
  margin-left: 10px;
  margin-right: 10px;
  /* opacity: 0.7; 透明度 0-1  越低越透明*/
}

.down{
  position: relative;
  width: auto;
  height: 168px;
  background-color: fef0da;
}
</style>
